<!DOCTYPE html>
<html>

	<head>
		<title>客户关系管理系统-角色管理</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/normalize.min.css" />

		<link rel="stylesheet" type="text/css" href="../../css/custom/scrollbar-style.min.css" />

		<script src="../../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

		<!--[if lte IE 8]>
			<script src="../../js/html5shiv.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../js/respond.min.js" type="text/javascript" charset="utf-8"></script>
		<![endif]-->

		<!-- 界面自定义CSS文件 -->
		<link rel="stylesheet" type="text/css" href="../../css/custom/scrollbar-style.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/custom/html-role-index.min.css" />

		<!--界面自定义JS文件-->
		<script src="../../js/custom/tip-popover.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/custom/html-role-index.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="container-fluid">

			<!--当前页面地理位置 (面包屑导航)-->
			<ul class="breadcrumb">
				<li>权限&amp;角色管理</li>
				<li>角色管理</li>
			</ul>

			<!--搜索表单及工具按钮-->
			<form id="form-search" method="get" class="form-inline">

				<div class="form-group">
					<label class="control-label">角色名称：</label>
					<input class="form-control" type="text" />

					<label class="control-label">描述：</label>
					<input class="form-control" type="text" />
				</div>
				<div class="form-group">
					<label class="control-label">标志：</label>
					<select class="form-control">
						<option value="-1">不限</option>
						<option value="1" class="text-danger">禁用</option>
						<option value="0" class="text-primary">启用</option>
					</select>
				</div>
				<div class="form-group btn-group">
					<button class="btn btn-default">
						<span class="glyphicon glyphicon-search"></span>
						查询
					</button>
					<button class="btn btn-default" type="button" data-toggle="modal" data-target="#modal-add">
						<span class="glyphicon glyphicon-plus"></span>
						新建
					</button>
				</div>

			</form>

			<hr />

			<!--数据表格部分-->
			<table class="table table-hover table-bordered">
				<thead class="bg-primary">
					<tr>
						<th class="hidden-xs">#</th>
						<th>角色名称</th>
						<th class="hidden-xs">描述</th>
						<th>标志</th>
						<th>操作</th>
					</tr>
					<tr class="bg-success text-primary">
						<td class="hidden-xs">0</td>
						<td>超级管理员</td>
						<td class="hidden-xs">超级管理员用于系统维护</td>
						<td colspan="2"><i>&lt;不可操作&gt;</i></td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="hidden-xs">1</td>
						<td>业务经理</td>
						<td class="hidden-xs">我就是个跑业务的</td>
						<td>
							<div class="text-success" title="启用">
								<span class="glyphicon glyphicon-ok"></span> 启用
							</div>
						</td>
						<td>
							<div class="btn-group btn-group-xs" data-id="1">
								<button class="btn btn-default" data-toggle="modal" data-target="#modal-edit" title="编辑">
									<span class="glyphicon glyphicon-edit"></span>
									<span class="hidden-xs">编辑</span>
								</button>
								<button class="btn btn-warning" title="禁用">
									<span class="glyphicon glyphicon-ban-circle"></span>
									<span class="hidden-xs">禁用</span>
								</button>
								<button class="btn btn-default" data-toggle="modal" data-target="#modal-power" title="权限">
									<span class="glyphicon glyphicon-eye-close"></span>
									<span class="hidden-xs">权限</span>
								</button>
								<button class="btn btn-default" title="删除">
									<div class="text-danger">
										<span class="glyphicon glyphicon-remove"></span>
										<span class="hidden-xs">删除</span>
									</div>
								</button>
							</div>
						</td>
					</tr>
					<tr class="text-muted" title="被禁用的角色" style="text-decoration: underline line-through;">
						<td class="hidden-xs">2</td>
						<td>客户开发经理</td>
						<td class="hidden-xs">你跑业务，有负责跟进</td>
						<td>
							<div class="text-danger" title="禁用">
								<span class="glyphicon glyphicon-remove"></span> 禁用
							</div>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" data-toggle="modal" data-target="#modal-edit" title="编辑">
									<span class="glyphicon glyphicon-edit"></span>
									<span class="hidden-xs">编辑</span>
								</button>
								<button class="btn btn-primary" title="启用">
									<span class="glyphicon glyphicon-ok-circle"></span>
									<span class="hidden-xs">启用</span>
								</button>
								<button class="btn btn-default disabled" title="被禁用角色不能分配权限">
									<span class="glyphicon glyphicon-eye-close"></span>
									<span class="hidden-xs">权限</span>
								</button>
								<button class="btn btn-default" title="删除">
									<div class="text-danger">
										<span class="glyphicon glyphicon-remove"></span>
										<span class="hidden-xs">删除</span>
									</div>
								</button>
							</div>
						</td>
					</tr>
					<tr>
						<td class="hidden-xs">3</td>
						<td>客户经理</td>
						<td class="hidden-xs">我的客户，我来负责</td>
						<td>
							<div class="text-success" title="启用">
								<span class="glyphicon glyphicon-ok"></span> 启用
							</div>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" data-toggle="modal" data-target="#modal-edit" title="编辑">
									<span class="glyphicon glyphicon-edit"></span>
									<span class="hidden-xs">编辑</span>
								</button>
								<button class="btn btn-warning" title="禁用">
									<span class="glyphicon glyphicon-ban-circle"></span>
									<span class="hidden-xs">禁用</span>
								</button>
								<button class="btn btn-default" data-toggle="modal" data-target="#modal-power" title="权限">
									<span class="glyphicon glyphicon-eye-close"></span>
									<span class="hidden-xs">权限</span>
								</button>
								<button class="btn btn-default" title="删除">
									<div class="text-danger">
										<span class="glyphicon glyphicon-remove"></span>
										<span class="hidden-xs">删除</span>
									</div>
								</button>
							</div>
						</td>
					</tr>
					<tr>
						<td class="hidden-xs">4</td>
						<td>副总经理</td>
						<td class="hidden-xs">副总经理，就是负责老总的经理</td>
						<td>
							<div class="text-success" title="启用">
								<span class="glyphicon glyphicon-ok"></span> 启用
							</div>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" data-toggle="modal" data-target="#modal-edit" title="编辑">
									<span class="glyphicon glyphicon-edit"></span>
									<span class="hidden-xs">编辑</span>
								</button>
								<button class="btn btn-warning" title="禁用">
									<span class="glyphicon glyphicon-ban-circle"></span>
									<span class="hidden-xs">禁用</span>
								</button>
								<button class="btn btn-default" data-toggle="modal" data-target="#modal-power" title="权限">
									<span class="glyphicon glyphicon-eye-close"></span>
									<span class="hidden-xs">权限</span>
								</button>
								<button class="btn btn-default" title="删除">
									<div class="text-danger">
										<span class="glyphicon glyphicon-remove"></span>
										<span class="hidden-xs">删除</span>
									</div>
								</button>
							</div>
						</td>
					</tr>
					<tr>
						<td class="hidden-xs">5</td>
						<td>总经理</td>
						<td class="hidden-xs">我总的是经理</td>
						<td>
							<div class="text-success" title="启用">
								<span class="glyphicon glyphicon-ok"></span> 启用
							</div>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" data-toggle="modal" data-target="#modal-edit" title="编辑">
									<span class="glyphicon glyphicon-edit"></span>
									<span class="hidden-xs">编辑</span>
								</button>
								<button class="btn btn-warning" title="禁用">
									<span class="glyphicon glyphicon-ban-circle"></span>
									<span class="hidden-xs">禁用</span>
								</button>
								<button class="btn btn-default" data-toggle="modal" data-target="#modal-power" title="权限">
									<span class="glyphicon glyphicon-eye-close"></span>
									<span class="hidden-xs">权限</span>
								</button>
								<button class="btn btn-default" title="删除">
									<div class="text-danger">
										<span class="glyphicon glyphicon-remove"></span>
										<span class="hidden-xs">删除</span>
									</div>
								</button>
							</div>
						</td>
					</tr>
				</tbody>
			</table>

			<!-- TODO 分页部分 -->
			<div class="text-center">
				<ul class="pagination">
					<li class="disabled">
						<a>&lt;</a>
					</li>
					<li class="active">
						<a>1</a>
					</li>
					<li>
						<a href="">2</a>
					</li>
					<li>
						<a href="">3</a>
					</li>
					<li>
						<a href="">4</a>
					</li>
					<li>
						<a href="">5</a>
					</li>
					<li>
						<a href="">&gt;</a>
					</li>
				</ul>
			</div>

		</div>

		<!-- TODO 添加角色modal部分-->
		<div class="modal fade" id="modal-add">
			<div class="modal-dialog">
				<div class="modal-content">

					<div class="modal-header">
						<span class="h3">
							<span class="glyphicon glyphicon-plus"></span> 新增角色
						</span>
					</div>

					<div class="modal-body">
						<form id="form-add" action="" class="form-horizontal">

							<div class="form-group">
								<label class="col-xs-3 control-label">角色名称：</label>
								<div class="col-xs-9">
									<input class="form-control" required="required" autofocus="autofocus" />
								</div>
							</div>

							<div class="form-group">
								<label class="col-xs-3 control-label">描述：</label>
								<div class="col-xs-9">
									<textarea class="form-control"></textarea>
								</div>
							</div>

							<div class="form-group">
								<label class="col-xs-3 control-label">标志：</label>
								<div class="col-xs-9">
									<div class="form-control-static text-success">
										<span class="glyphicon glyphicon-ok"></span> 启用
									</div>
								</div>
							</div>

						</form>
					</div>

					<div class="modal-footer">
						<button class="btn btn-default" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
							关闭
						</button>
						<button class="btn btn-primary" form="form-add">
							<span class="glyphicon glyphicon-save"></span>
							新增
						</button>
					</div>

				</div>
			</div>
		</div>

		<!-- TODO 修改角色modal部分-->
		<div class="modal fade" id="modal-edit">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<span class="h3">
							<span class="glyphicon glyphicon-edit"></span> 编辑角色信息
						<small>业务经理</small>
						</span>
					</div>
					<div class="modal-body">
						<form id="form-edit" action="" class="form-horizontal">
							<div class="form-group">
								<label class="col-xs-3 control-label">角色编号：</label>
								<div class="col-xs-9 form-control-static">1</div>
							</div>
							<div class="form-group">
								<label class="col-xs-3 control-label">名称：</label>
								<div class="col-xs-9">
									<input class="form-control" required="required" value="业务经理" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-3 control-label">描述：</label>
								<div class="col-xs-9">
									<textarea class="form-control">我就是个跑业务的</textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-3 control-label">标志：</label>
								<div class="col-xs-9 form-control-static">
									<span class="glyphicon glyphicon-ok text-success"></span>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-default" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
							关闭
						</button>
						<button class="btn btn-primary" form="form-edit">
							<span class="glyphicon glyphicon-edit"></span>
							更新
						</button>
					</div>
				</div>
			</div>
		</div>

		<!-- TODO 仅限分配modal部分 -->
		<div class="modal fade" id="modal-power">
			<div class="modal-dialog modal-lg">
				<form action="" class="modal-content" id="form-power">
					<div class="modal-header">
						<div class="modal-title h3">
							<span class="glyphicon glyphicon-eye-close"></span> 分配权限
							<small>业务经理</small>
						</div>
					</div>
					<div class="modal-body">
						<div class="panel-group">

							<div class="panel panel-info">
								<div class="panel-heading">
									<a class="close" data-toggle="collapse" data-target="#panel-1">
										<span class="caret"></span>
									</a>
									<div class="panel-title">
										<label class="checkbox-inline">
											<input type="checkbox" checked="checked" />
											营销
										</label>
										<span class="badge">2</span>
									</div>
								</div>
								<div id="panel-1" class="collapse in">
									<div class="panel-body">
										<div class="row">
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<label class="checkbox-inline">
													<input type="checkbox" checked="checked" />销售机会管理
												</label>
											</div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<label class="checkbox-inline disabled" title="该权限已被禁用">
													<input type="checkbox" checked="checked" disabled="disabled" />客户开发管理
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="panel panel-info">
								<div class="panel-heading">
									<a class="close" data-toggle="collapse" data-target="#panel-2">
										<span class="caret"></span>
									</a>
									<div class="panel-title">
										<label class="checkbox-inline">
											<input type="checkbox" />
											客户
										</label>
										<span class="badge">2</span>
									</div>
								</div>
								<div id="panel-2" class="collapse in">
									<div class="panel-body">
										<div class="row">
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<label class="checkbox-inline">
													<input type="checkbox" />客户信息管理
												</label>
											</div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<label class="checkbox-inline">
													<input type="checkbox" />	客户流失管理
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="panel panel-info">
								<div class="panel-heading">
									<a class="close" data-toggle="collapse" data-target="#panel-3">
										<span class="caret"></span>
									</a>
									<div class="panel-title">
										<label class="checkbox-inline">
											<input type="checkbox" />
											权限&amp;角色
										</label>
										<span class="badge">2</span>
									</div>
								</div>
								<div id="panel-3" class="collapse in">
									<div class="panel-body">
										<div class="row">
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<label class="checkbox-inline">
													<input type="checkbox"  />权限管理
												</label>
											</div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<label class="checkbox-inline">
													<input type="checkbox" />角色管理
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="panel panel-warning">
								<div class="panel-heading">
									<a class="close" data-toggle="collapse" data-target="#panel-4">
										<span class="caret"></span>
									</a>
									<div class="panel-title">
										<label class="checkbox-inline">
											<input type="checkbox" />
											未分组
										</label>
										<span class="badge">2</span>
									</div>
								</div>
								<div id="panel-4" class="collapse in">
									<div class="panel-body">
										<div class="row">
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<label class="checkbox-inline">
													<input type="checkbox" />用户信息管理
												</label>
											</div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<label class="checkbox-inline">
													<input type="checkbox" />用户角色分配
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-default" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
							关闭
						</button>
						<button class="btn btn-primary">
							<span class="glyphicon glyphicon-save"></span>
							保存
						</button>
					</div>
				</form>
			</div>
		</div>
	</body>

</html>